/*
* 科技有限公司版权所有（）.
* Copyright (c) 2019,   and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author
* @Description  项目 - 侧边栏
**/
<template>
  <aside class="pr-aside">
    <p class="pr-name">建信营销平台</p>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="defaultActive()" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#041527" text-color="#fff"
        active-text-color="#fff" router>
        <el-submenu index="1" id="22" v-if="menuIdList.includes('22')">
          <template slot="title">
            <span>活动管理</span>
          </template>
          <el-menu-item index="/activityList">活动列表</el-menu-item>
        </el-submenu>

        <el-submenu index="2" id="23" v-if="menuIdList.includes('23')">
          <template slot="title">
            <span slot="title">订单管理</span>
          </template>
          <el-menu-item index="/orderList">订单列表</el-menu-item>
        </el-submenu>
        <el-submenu index="3" id="24" v-if="menuIdList.includes('24')">
          <template slot="title">
            <span>加油站管理</span>
          </template>
          <el-menu-item index="/gasList">加油站列表</el-menu-item>
        </el-submenu>
        <el-submenu index="4" id="25" v-if="menuIdList.includes('25')">
          <template slot="title">
            <span slot="title">系统设置</span>
          </template>
          <el-menu-item index="/systemSet">账号管理</el-menu-item>
          <el-menu-item index="/roleMtg">角色管理 </el-menu-item>
          <el-menu-item index="/phone">手机白名单 </el-menu-item>
        </el-submenu>

      </el-menu>
    </el-scrollbar>
  </aside>
</template>
<script>
// 活动管理：22、订单管理：23、加油站管理：24、系统设置：25
export default {
  name: "asideBar",
  props: {},
  components: {},
  data() {
    return {
      menuList: [],
      menuIdList: ['22', '23', '24', '25'],
      routerList: [],
    };
  },
  watch: {},
  created() {
    this.routerList = JSON.parse(localStorage.getItem('routerList'))

  },
  mounted() {
    this.$nextTick(() => {
      this.menuList = JSON.parse(localStorage.getItem('menusStr'))
      const arr = []
      this.menuList.forEach(element => {
        arr.push(element.id.toString())
      });

      this.menuIdList = arr
      console.log('this.menuList-------------', this.menuList)
      console.log('this.menuIdList-------------', this.menuIdList)
    })
  },
  methods: {
    /**
     *@Description
     *@Param
     *@Return 菜单 一级 展开 事件.
     **/
    handleOpen(key, keyPath) {
      console.log('handleOpen---------', key, keyPath);
    },
    /**
     *@Description
     *@Return 菜单 一级 收起 事件.
     **/
    handleClose(key, keyPath) {
      console.log('handleClose----------', key, keyPath);
    },
    /**
     *@Description
     *@Return 菜单  路由匹配.
     **/
    defaultActive() {
      const path = this.$route.path
      console.log('path-----', path)
      if (path.includes('activityDetail') || path.includes('addEdit') || path.includes('activityRenovation')) {
        return '/activityList'
      } else if (path.includes('allocMenu') || path.includes('allocResource')) {
        return '/roleMtg'
      } else if (path.includes('orderList') || path.includes('orderDetail')) {
        return '/orderList'
      }
      return path
    }
  },
};
</script>
<style lang="scss" scoped="scoped">
.pr-aside {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 210px;
  background-color: rgb(4, 21, 39);
}
.pr-name {
  padding: 15px 0 15px 20px;
  color: #fff;
  border-bottom: 1px solid #dcdcdc;
}
.el-scrollbar {
  height: 100%;
}
.el-menu {
  border: none;
}
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}

.is-active .is-active {
  background: #4290f7 !important;
}
</style>
